{% load static %}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
    <title>Login Page</title>

</head>
<body>
<div class="box">
    <div class="left">
        <h2>欢迎来到 JOBFLOW AI！</h2>
        <img class="huojian" src="{% static 'image/huojian.png' %}">
        <img class="u32" src="{% static 'image/u32.png' %}">
    </div>

    <div class="right">
        <h4>用户登录</h4>
        <h5>USER REGISTRATION</h5>
        <div class="login-buttons">
            <div class="login-button">
                <img src="{% static '/image/phone-icon.png' %}" alt="手机图标">
                <span>手机登录</span>
            </div>
            <div class="login-button">
                <img src="{% static '/image/wechat-icon.png' %}" alt="微信图标">
                <span>微信登陆</span>
            </div>
        </div>

        <div id="huo" class="huo">
            <p>
                <span>————————或者使用电子邮箱登录————————</span>
            </p>
        </div>
        <form method="post">
            {% csrf_token %}
            <label for="username">用户名/邮箱:</label>
            <input type="text" name="username" id="username" required>
           <span id="error_username" style="color: red;height: 15px;width:auto;margin:0 auto;display:inline-block;"></span><br><!--添加了width:auto;margin:0 auto;display:inline-block;让span居中-->


            <label for="password">密码:</label>
            <input type="password" name="password" id="password" required>
            <span id="error_password" style="color: red;height: 15px;width:auto;margin:0 auto;display:inline-block;"></span><br>


{#              <label for="photo_code">图形验证码:</label>#}
{#<div class="verification-code-input">#}
{#    <input type="text" name="photo_code" id="photo_code_input" required>#}
{#    <span class="error-text"  id="photo_code_error" style="color: red;height: 15px;width:auto;margin:0 auto;display:inline-block;"></span><br>#}
{#    <img  class="img-code"  src="http://127.0.0.1:8000/image_codes/7f3337b4-a888-487c-b92f-16bd4d578fb3/" alt="图形验证码" class="pic_code" @click="generate_image_code">#}
{#</div>#}


{#            <label for="code">图形验证码:</label>#}
{#<div class="verification-code-input">#}
{#    <input type="text" name="code" id="code" required>#}
{#    <img style=" cursor: pointer;"  src="{{ 'http://127.0.0.1:8000/image_codes/initial/' }}" alt="图形验证码" class="pic_code" onclick="generateImageCode(this)">#}
{#</div>#}
{% if error_message %}
    <span id="error_message" class="error">{{ error_message }}</span>
{% endif %}



            <button type="submit">登 录</button>
            <span id="errmsg_login" style="color: red;">{{ errmsg_login }}</span>

        </form>
        <div class="links">
            <a class="links1" href="{% url 'users:resetpwd' %}">忘记 密码?</a>
            <a class="links2" href="{% url 'users:register' %}">注册</a>

        </div>
    </div>

    <script src="{% static 'js/jquery-3.7.0.min.js' %}"></script>
    <script src="{% static 'js/axios-0.18.0.min.js' %}"></script>
    <script src="{% static 'js/login.js' %}"></script>

</div>
</body>
</html>
